<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>海空运文件下载</span>
          </div>
          <el-form ref="statementWaybillFileTypeForm" :model="statementWaybillFileTypeData" :rules="rules"
                   size="mini" label-width="100px">
            <el-form-item label="文件类型" prop="fileTypeId">
              <el-select v-model="statementWaybillFileTypeData.fileTypeId" placeholder="请选择文件类型" clearable filterable
                         :style="{width: '100%'}" @blur="selectBlur">
                <el-option
                  v-for="(item, value) in statementSource.fileTypeMap" :key="value" :label="item" :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运单号" prop="waybillNos">
              <el-input v-model="statementWaybillFileTypeData.waybillNos" type="textarea" placeholder="请输入运单号"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="入库日期" prop="rangeInStockDate">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="statementWaybillFileTypeData.rangeInStockDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="rangeCreatedTime">
              <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="statementWaybillFileTypeData.rangeInStockTime"
                              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="开始时间(带时分秒)"
                              end-placeholder="结束时间(带时分秒)" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="客户" prop="customerId">
              <el-select v-model="statementWaybillFileTypeData.customerId" placeholder="请输入关键字" clearable filterable remote :remote-method="remoteCustomer"
                         :style="{width: '100%'}">
                <el-option v-for="item in customerIdOptions" :key="item.id" :label="item.text" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目的国" prop="countryId">
              <el-select v-model="statementWaybillFileTypeData.countryId" placeholder="请选择目的国" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, value) in statementSource.countryNameMap" :key="value" :label="item" :value="value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库渠道" prop="inStockChannel">
              <el-select v-model="statementWaybillFileTypeData.inStockChannel" placeholder="请选择入库渠道" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, value) in statementSource.customerChannelNameMap" :key="value" :label="item" :value="value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库代码" prop="dispatchAddressCode">
              <el-select v-model="statementWaybillFileTypeData.dispatchAddressCode" placeholder="请选择仓库代码" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, value) in statementSource.shippingfbastockMap" :key="value" :label="item" :value="value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="mini">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import * as constant from "@/store/yg/common/constant";
  export default {
    components: {},
    props: [],
    data() {
      return {
        statementSource: {},
        statementWaybillFileTypeData: {
          fileTypeId: null,
          waybillNos: null,
          rangeInStockTime: null,
          rangeInStockDate: null,
          customerId: null,
          countryId: null,
          inStockChannel: null,
          dispatchAddressCode: null,
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        rules: {
          fileTypeId: [{
            required: true,
            message: '请选择文件类型',
            trigger: 'change'
          }]
        },
        customerIdOptions: [],
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      selectBlur(e) {
          if (e.target.value) {  
              this.statementWaybillFileTypeData.fileTypeId = e.target.value;
          }
      },
      async init() {
        this.statementSource = await ajax("initStatementFileCenterSource", {});
      },
      async remoteCustomer(query){
        console.log("this.1");
        if (query !== '') {
          this.customerIdOptions = await ajax("searchCustomerSelect", {
            name: query
          });
        }else {
          this.customerIdOptions = {};
        }
        console.log("this.customerIdOptions"+this.customerIdOptions);
      },
      submitForm() {
        this.$refs['statementWaybillFileTypeForm'].validate(valid => {
          if (!valid) return
          this.downFileByWaybillFileTypes();
        })
      },
      async downFileByWaybillFileTypes(){
        const data = await ajax("downFileByWaybillFileTypes", this.statementWaybillFileTypeData);
        if(data.code == 200){
          var path = (path = constant.FILE_SERVER + data.message);
          location.href = constant.API_SERVER + "/open/downloadFileByHttp?fileName=&path=" + path;
        }else {
          this.$message.error(data.message);
        }
      }
    }
  }

</script>
<style>
</style>
